<div class="form-container">
    <div
        class="form-control tags"
        #form
        [class.blank]="styleBlank"
        [class.dashed]="styleDashed && !(snapshot.tags.length > 0)"
        [class.disabled]="snapshot.isDisabled"
        [class.focus]="snapshot.hasFocus"
        [class.multiline]="!styleScrollable"
        [class.readonly]="readonly"
        [class.singleline]="styleScrollable"
        [class.suggested]="itemsSorted.length > 0"
        (focus)="focusInput($event)"
        (mousedown)="focusInput($event)"
        tabindex="0">
        @for (tag of snapshot.tags; track tag; let i = $index) {
            <span class="item" [class.disabled]="addInput.disabled"> {{ tag }} <i class="icon-close" (click)="remove(i)"></i> </span>
        }
        <input
            class="blank text-input"
            #input
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            (blur)="markTouched()"
            (copy)="onCopy($event)"
            (cut)="onCut($event)"
            (focus)="focus()"
            [formControl]="addInput"
            (keydown)="onKeyDown($event)"
            (paste)="onPaste($event)"
            [placeholder]="placeholder | sqxTranslate"
            spellcheck="false" />
    </div>

    @if (!readonly && (allowOpen || itemsSorted.length > 0)) {
        <div class="btn btn-sm" (click)="openModal()" sqxStopClick><i class="icon-caret-down"></i></div>
    }
    <sqx-dropdown-menu
        class="control-dropdown"
        #container
        adjustHeight="false"
        adjustWidth="true"
        position="bottom-end"
        scrollX="false"
        scrollY="true"
        [sqxAnchoredTo]="form"
        *sqxModal="snapshot.suggestedItems.length > 0"
        [style.minWidth]="dropdownWidth">
        @for (item of snapshot.suggestedItems; track item; let i = $index) {
            <div
                class="control-dropdown-item control-dropdown-item-selectable"
                [class.active]="i === snapshot.suggestedIndex"
                [class.separated]="itemSeparator"
                (mousedown)="selectValue(item)"
                (mouseover)="selectIndex(i)"
                [sqxScrollActive]="i === snapshot.suggestedIndex"
                [sqxScrollContainer]="container.nativeElement">
                <ng-container>{{ item }}</ng-container>
            </div>
        }
    </sqx-dropdown-menu>
    <sqx-dropdown-menu
        class="control-dropdown suggestions-dropdown"
        adjustHeight="false"
        adjustWidth="false"
        position="bottom-end"
        scrollX="false"
        scrollY="true"
        [sqxAnchoredTo]="form"
        *sqxModal="itemsModal">
        <div class="row">
            @for (item of itemsSorted; track item; let i = $index) {
                <div class="col-6">
                    <div class="form-check form-check">
                        <input
                            class="form-check-input"
                            id="tag_{{ i }}"
                            [ngModel]="isSelected(item)"
                            (ngModelChange)="toggleValue($event, item)"
                            type="checkbox" />
                        <label class="form-check-label" for="tag_{{ i }}" title="{{ item.name }}" titlePosition="top-start">
                            <span class="truncate">{{ item.name }}</span>
                        </label>
                    </div>
                </div>
            }
        </div>

        @if (itemsSorted.length === 0) {
            <div class="text-decent">
                @if (itemsSourceLoading) {
                    <sqx-loader color="input" />
                } @else {
                    <small>{{ itemsSourceEmptyText | sqxTranslate }}</small>
                }
            </div>
        }
    </sqx-dropdown-menu>
</div>
